import React, { useContext, useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Alert,
  TextInput,
  Keyboard,
} from "react-native";
import query from "../../api/query";
import AsyncStorage from "@react-native-async-storage/async-storage";
import TestQuesCard from "../../components/preAdmin/TestQuesCard";
import NoData from "../../components/preAdmin/NoData";
import LoadingBar from "../../components/InterView/LoadingBar";

const TestViewing = ({ navigation }) => {
  const [questions, setQuestions] = useState([]);
  const [title, setTitle] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const token = await AsyncStorage.getItem("token");
      const result = await query.get("/test/publish", {
        headers: { Authorization: token },
      });
      if (result.data.data.length !== 0) {
        setQuestions(result.data.data[0].questions);
        setTitle(result.data.data[0].title);
      }
      setIsLoading(false);
    };
    fetchData();
  }, []);

  return (
    <View style={styles.container}>
      <LoadingBar visible={isLoading} />
      <FlatList
        data={questions}
        ListHeaderComponent={
          <Text style={{ fontSize: 18, textAlign: "center", margin: 5 }}>
            {title}
          </Text>
        }
        ListEmptyComponent={<NoData />}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <TestQuesCard index={index} item={item} />
        )}
      />
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    backgroundColor: "#f5f5f5",
    flex: 1,
  },
});

export default TestViewing;
